<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单伪类</title>
		<style>
			input:enabled{
				background-color: #f6e58d;
			}
			input:disabled{
				background-color: #ff7979;
			}
			input:checked+label{
				color: green;
			}
			input:required{
				border: 2px #eb4d4b solid;
				background: #AAAAAA;
			}
			input:optional{
				background-color: #FF7979;
				border: none;
			}
			input:valid{
				border: solid 2px green;
			}
			input:invalid{
				border: solid 2px yellow;
			}
		</style>
	</head>
	<body>
		<!--
			input:enabled 选择每个启用的input元素
			input:disabled 选择每个禁用的input元素
			input:checked 选择每个选中的input元素
			input:required 包含required属性的元素
			input:optional 不包含required属性的元素
			input:valid 验证通过的表单元素
			input:invalid 验证不通过的表单元素
		-->
		<!--表单属性样式-->
		<form action="">
			<input type="text" disabled="disabled">
			<input type="text" name="info">
			<hr >
			<input type="radio" name="sex" id="boy">
			<label for="boy">男</label>
			<input type="radio" name="sex" checked="checked" id="girl">
			<label for="girl">女</label>
			<hr >
			<input type="text" name="title" required="required">
			<hr>
			<input type="email" required="required">
			<button type="submit">提交</button>
		</form>
	</body>
</html>
